<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form label-width="80px" :model="pagerArry">

          <!-- 面包屑 -->
          <!-- <template v-if="this.$route.query.id"> -->
          <el-row v-if="this.$route.query.id">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>学科管理</el-breadcrumb-item>
              <el-breadcrumb-item>{{this.$route.query.name}}</el-breadcrumb-item>
              <el-breadcrumb-item>目录管理</el-breadcrumb-item>
            </el-breadcrumb>
          </el-row>
          <hr v-if="this.$route.query.id">
          <!-- </template> -->

          <el-row type="flex">
            <!-- 搜索框 -->
            <el-col :span="5">
              <el-form-item label="目录名称">
              <el-input
              ref="input"
              size="mini"
              v-model="pagerArry.directoryName"
              ></el-input>
              </el-form-item>
            </el-col>
            <!-- 状态 -->
            <el-col :span="9">
              <el-form-item style="margin-left:12px" label="状态">
            <el-select
              v-model="pagerArry.state"
              size="mini"
              placeholder="请选择"
              @change="stateChange"
            >
              <el-option label="启用" :value="1"></el-option>
              <el-option label="禁用" :value="0"></el-option>
            </el-select>
            <!-- 清除 搜素 -->
            <el-button size="mini" style="margin-left:9px" @click="revClick">清除</el-button>
              <el-button size="mini" type="primary" @click="seerClick">搜索</el-button>
          </el-form-item>
            </el-col>
            <!-- 新增目录 -->
            <el-col :span="10">
              <el-form-item >
                <el-row type="flex" justify="end">
                  <el-form-item>

            <el-button
              v-if="this.$route.query.id" type="text"
              @click="$router.push('/subjects/list')"
            >返回学科</el-button>

            <el-button
            @click="addClick"
              margin-left:auto
              icon="el-icon-edit"
              type="success"
              size="mini"
              >新增目录</el-button
            >
          </el-form-item>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 数据提示 -->
        <el-alert :closable="false" :title="`数据一共${counts}条`" type="info" show-icon>
        </el-alert>
        <!-- 表格部分 -->
        <el-table :data="tagsList">
          <el-table-column label="序号" width="100px" type="index"></el-table-column>
          <el-table-column label="所属学科" prop="subjectName"></el-table-column>
          <el-table-column label="目录名称" prop="directoryName"></el-table-column>
          <el-table-column label="创建者" prop="username"></el-table-column>
          <el-table-column label="创建日期" prop="createTime">
            <template #default="{ row }"> {{ time(row.createTime) }} </template>
          </el-table-column>
          <el-table-column label="面试题数量" prop="totals"></el-table-column>
          <el-table-column prop="totals" label="状态">
            <template #default="{ row }">
              {{ !!row.state  ? "已启用" : "已禁用" }}
            </template>
          </el-table-column>
          <el-table-column prop="state" label="操作">
            <template #default="{ row }">
              <el-button prop="code" @click="changeClick(row)" type="text" size="mini">{{row.state === 1 ? "禁用" : "启用"}}</el-button>
              <el-button :disabled="row.state === 1" type="text" size="mini" @click="modify(row)"
                >修改</el-button
              >
              <el-button :disabled="row.state === 1" type="text" size="mini" @click="deleteClick(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 分页器 -->
    <el-row type="flex" justify="end">
            <el-pagination
              @size-change="sChange"
              @current-change="cChange"
              background
              :page-sizes="['5','10','20', '50']"
              :page-size="pagerArry.pagesize"
              :page="pagerArry.page"
              layout="prev, pager, next, sizes, jumper"
              :total="counts"
            >
          </el-pagination>
        </el-row>
        <!-- 弹层 -->
        <directorys-add
        ref="directorysAdd"
        :show-dialog.sync="showDialog"
        @updateDepartmentList="getTagsList()"
        >
        </directorys-add>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { list, remove } from '@/api/hmmm/directorys'
import DirectorysAdd from '../components/directorys-add.vue'
export default {
  components: {
    DirectorysAdd
  },
  data () {
    return {
      tagsList: [], // 标签列表
      pagerArry: {
        pagesize: 10, // 页大小
        page: 1, // 当前页码
        directoryName: '',
        state: null
      },
      // formData: {
      //   tagName: '',
      //   state: null
      // },
      showDialog: false,
      counts: 0,
      currentID: null
    }
  },
  created () {
    // if (this.$route.query.id) {
    // this.pagerArry.directoryName = this.$route.query.name
    // }
    this.getTagsList()
  },
  methods: {
    // 状态发生变化后
    stateChange (val) {
      this.pagerArry.state = val
    },
    // 修改按钮事件
    async modify (row) {
      this.showDialog = true
      // this.currentID = id
      this.$nextTick(() => {
        this.$refs.directorysAdd.getTagsDetail(row)
      })
    },
    // 删除事件
    async deleteClick (row) {
      const res = await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (res !== 'confirm') {
        return this.$message('您取消了删除操作!')
      }
      try {
        const { data } = await remove(row)
        this.res = data.success
        this.$message.success('删除成功!')
        this.getTagsList()
      } catch (e) {
        this.$message.error('删除失败!')
      }
    },
    // 清除按钮事件
    revClick () {
      this.pagerArry.directoryName = ''
      this.pagerArry.state = null
    },
    // 搜索框事件
    seerClick () {
      // this.pagerArry.tagName = this.$refs.input.value
      // console.log(this.pagerArry.tagName)
      this.getTagsList()
    },
    // async getTagsListForSearch () {
    //   const { data } = await list(this.formData)
    //   console.log(data)
    //   this.tagsList = data.items
    // },
    // 弹层显示
    addClick () {
      // this.currentID = null
      this.showDialog = true
    },
    // 测试禁用按钮
    changeClick (row) {
      // row.state = !row.state
      // console.log(row)
      // console.log(typeof row.state)
      if (row.state === 0) {
        row.state = 1
      } else {
        row.state = 0
      }

      // row.state === 0 ? row.state = 1
    },
    // 调用标签列表
    async getTagsList () {
      if (this.$route.query.id) {
        // this.pagerArry.directoryName = this.$route.query.name
        this.pagerArry.subjectID = this.$route.query.id
      }
      const { data } = await list(this.pagerArry)
      this.tagsList = data.items
      console.log(this.tagsList)
      this.counts = data.counts
      // console.log(this.counts)
    },
    // 时间纠正
    time (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 分页器按钮
    sChange (val) {
      this.pagerArry.pagesize = val
      this.getTagsList()
    },
    cChange (val) {
      this.pagerArry.page = val
      this.getTagsList()
    }
  }
}
</script>

<style scoped lang="scss">
.right {
  margin-left: auto;
}
</style>
